fix(tabs): 修复Tabs在ios低版本不渲染(#247) #514
Conversation
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough这次更改为 Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (2 hunks)
- src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (2 hunks)
Additional comments not posted (3)
src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1)
3-3: 改进类型安全性和清晰度通过引入
TabProps并使用Pick工具类型定义TTabProps，增强了类型安全性和代码的清晰度。这种方式确保了在处理选项卡属性时，只有需要的属性被使用。src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (2)
146-146: 增强组件的响应性通过引入
TTabProps并在watch函数中使用它来处理选项卡项，增强了组件的响应性和数据同步能力。这种改进确保了选项卡项与其底层数据始终保持同步。
177-185: 验证对children的观察
watch函数用于观察children的变化并更新items。请确保children的变化会触发正确的更新逻辑，并且所有相关的子组件属性都被正确处理。Verification successful
验证通过：
children的观察逻辑
watch函数正确地设置为观察children的变化，并在变化时更新items。children是通过useChildren组合式函数提供的，并在多个组件中使用，表明其作为共享状态被管理。此设置应能确保children的任何变化都会触发items的更新逻辑。Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that changes to `children` trigger updates to `items`. # Test: Search for `children` usage and ensure it aligns with the `watch` function logic. rg --type vue --type ts --type js 'children' -A 5Length of output: 77
Script:
#!/bin/bash # Description: Verify that changes to `children` trigger updates to `items`. # Test: Search for `children` usage and ensure it aligns with the `watch` function logic. rg 'children' -A 5Length of output: 30354
ios13.3.1, tab挂载后，tabs的数组未更新，使用watch加flush: 'post'后，渲染正常 |
|
|
|
我想tabs中 |
|
使用computed时，items为空数组 使用watch后 |
|
使用inject注入后，children改变了，但是computed监听不到他变了，返回的items还是空 |
嗯，是的，这个就是问题所在。我想也可以看看是否需要提个issue给到uni-app来解决这个问题，目前看来只会在14之前的iOS上复现此问题。 |
嗯，ios16之前的应该都有这个问题，issue中14版本也有这个问题， |
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#247
💡 需求背景和解决方案
解决tabs在ios低版本不渲染
修改代码如下
// tabs数据 const items = ref<TTabProps[]>([]) // 解决ios低版本tabs不渲染 watch(children, newChildren => { items.value = newChildren.map((child, index) => { return { disabled: child.disabled, title: child.title, name: isDef(child.name)? child.name : index } }) }, { deep: true, flush: 'post' })☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
wd-tabs组件的标签项管理，支持更结构化的标签属性。文档